<template>
  <div style="max-height: 100vh;max-width: 100vw">
    <div>
      <vue-starry-sky :stars-count="800"></vue-starry-sky>
      <jumpHeart width="120px" height="120px" top="10vh" left="12vw"></jumpHeart>
      <div class="setHover hover" style="width:360px;height:120px;top: 9vh;left: 80vw;" id="setHover"></div>
      <div class="setHover hover0" style="width:360px;height:120px;top: 50vh;left: 12vw;" id="setHover0"></div>
      <div class="setHover hover1" style="width:360px;height:120px;top: 72vh;left: 72vw;" id="setHover1"></div>
      <div style="position:fixed;bottom:1vh;left: 1vw;width: 8vw">
        <videos></videos>
      </div><!--    <div class="decorate1"></div>-->
      <div style="position:fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: fit-content">
        <el-image
            style="width: 39rem; height: 28.3rem"
            :src="require('../../static/picture1.jpg')"
            fit="fill"></el-image>
      </div>
      <div class="decorate"></div>
    </div>
    <div @click="setea" style="position: fixed;top: 2vh;right: 2vw">
      <el-image
          style="width: 72px; height: 72px"
          :src="require('../../static/music.gif')"
          fit="fill">
      </el-image>
    </div>
    <audio ref="audios" src="../../static/Summer.mp3" loop="loop" controls="controls" autoplay="true" v-show="false"></audio>
  </div>
</template>

<script>
  import jumpHeart from "./jumpHeart";
  import videos from "./videos";
export default {
  components:{ jumpHeart, videos  },
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      audio:'',
      isPlay:false
    }
  },
  computed:{
  },
  watch:{
  },
  created(){
  },
  mounted(){
    this.audio = new Audio('../../static/Summer.mp3')
    this.showa('setHover')
    let that=this
    setTimeout(function (){
      that.showa('setHover0')
    },900)
    setTimeout(function (){
      that.showa('setHover1')
    },1700)
  },
  methods:{
    setea(){
      this.isPlay ?  this.$refs.audios.pause() : this.$refs.audios.play()
      this.isPlay = !this.isPlay
    },
    showa(ids=''){
      let op=0.1
      let that=this
      if( document.getElementById(ids).style.opacity > 0 ) { return }
      let time=setInterval(function (){
        document.getElementById(ids).style.opacity=op
        op+=0.05
        if(op>0.8){
          document.getElementById(ids).style.opacity=op
          clearInterval(time)
          that.hideThis(ids)
        }
      },120)
    },
    hideThis(ids=''){
      let op=0.8
      let that=this
      setTimeout(function (){
        let time=setInterval(function (){
          document.getElementById(ids).style.opacity=op
          op-=0.05
          if(op<0){
            document.getElementById(ids).style.opacity=0
            clearInterval(time)
            setTimeout(function (){
              that.showa(ids)
            },1200)
          }
        },120)
      },1300)
    }
  }
}
</script>

<style scoped>
  .decorate{
    background-image: url("../../static/lunzi.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 12vh;
    left: 24vw;
  }
  .setHover{
    position: absolute;
    background-repeat: no-repeat;
    z-index: 99999;
    background-size: contain;
    opacity: 0;
  }
  .hover{
    background-image: url("../../static/fleya.png");
  }
  .hover0{
    background-image: url('../../static/heapy.png')
  }
  .hover1{
    background-image: url('../../static/firstheart.png')
  }
</style>
